import React from 'react'
import PropTypes from 'prop-types'

/* 
类组件中读取props: this.props.xxx
	 name属性: 字符串类型, 必须的
​		age属性: 数值类型, 不是必须的, 默认值为0
*/
export class ClassProps extends React.Component {
  // props检查/校验
  static propTypes = {
    name: PropTypes.string.isRequired, // string类型/必须
    age: PropTypes.number // number类型
  }

  // 指定prop的默认值
  static defaultProps = {
    age: 0
  }

  render () {
    const {name, age} = this.props
    return <div>ClassProps-用户信息: 姓名: {name}, 年龄: {age}</div>
  }
}

/* 
函数组件: 通过参数对象来接收props
	myName属性: 字符串类型, 必须的
​	 myAge属性: 数值类型, 不是必须的, 默认值为1
*/
export function FunctionProps(props) {
  const {myName, myAge} = props
  return <div>FunctionProps-用户信息: 姓名: {myName}, 年龄: {myAge}</div>
}

// prop校验
FunctionProps.propTypes = {
  myName: PropTypes.string.isRequired,
  myAge: PropTypes.number
}
// prop默认值
FunctionProps.defaultProps = {
  myAge: 1
}

// export {
//   ClassProps,
//   FunctionProps
// }